<template>
    <div>
      <!-- 文本插值示例 -->
      <p>Hello, {{ name }}!</p>
  
      <!-- v-if 示例 -->
      <p v-if="isVisible">This text is visible because isVisible is true.</p>
      <p v-else>This text is visible because isVisible is false.</p>
  
      <!-- v-for 示例 -->
      <ul>
        <li v-for="(item, index) in items" :key="index">{{ index }} - {{ item }}</li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    name: 'RenderingExample',
    data() {
      return {
        name: 'Vue.js',
        isVisible: true,
        items: ['Apple', 'Banana', 'Cherry']
      };
    }
  };
  </script>
  
  <style scoped>
  /* 可以添加一些样式 */
  </style>